@import "mixins"

padding-space = 20px
border-small = 5px
line-bottom = 1px #EEF solid
line-top = 1px #000 solid
table-cell-padding = padding-space / 3 padding-space
table-radius = padding-space
color-background = #FFF
color-highlight = #EEF

*
  margin 0
  padding 0
  border 0
  outline 0
  font-size 100%
  vertical-align baseline
  font-normal()

body
  background-image url("../img/stripes_bg.png")

#wrapper_content
  background-color color-background
  border-bottom-left-radius padding-space
  border-bottom-right-radius padding-space
  border 1px #999 solid
  border-top none
  box-shadow 0 0 10px #000
  margin 0 auto
  padding padding-space padding-space 0 padding-space
  width 960px - 2 * padding-space

header
  border-bottom line-bottom
  #wrapper_header
    border-bottom line-top
    padding-bottom padding-space
    #wrapper_logo
      display inline-block
      text-shadow 1px 1px #999
      #logo
        font-size 30px
        font-bold()
  #wrapper_user_info
    display inline-block
    display none
    float right
    text-align right
    #button_logout
      margin-right 0!important
    #logged_as
      font-size: 20px

footer
  font-size 12px
  margin padding-space auto padding-space auto
  text-align center
  width 960px
  a
    font-size: 12px

input
  border-3d(#AAA, #DDD)
  border-radius border-small
  margin-right padding-space
  margin-bottom (padding-space / 4)
  padding 3px 10px

input:focus
  outline none
  box-shadow 0 0 10px #66F

a:focus
  outline none
  text-shadow 0 0 10px #66F

input[type="button"], select
  border-3d(#F6F6F6, #AAA)
  background-color #EEE

input[type="button"]:hover
  background-color #DDD

input[type="button"]:disabled, input[type="button"]:disabled:hover
  border-3d(#F6F6F6, #AAA)
  background-color #EEE

input[type="button"]:active
  border-3d(#999, #EEE)
  background-color #BBB

input[type="file"]
  border none

input.long
  width (400px + 2 * padding-space)

textarea
  border-3d(#999, #EEE)
  resize vertical
  width 100%

#name, #password
  margin-right padding-space

#subject_options_test_name, #subject_options_test_deadline
  width 120px

#login
  #form_login
    margin padding-space 0 (3 / 4 *padding-space) 0

#subjects
  display none
  
  #table_subjects
    
    .subject, .test, .running, .message
      padding-left padding-space
    
    .row
      border-bottom line-top
      border-top line-bottom
    
    .row:first-child
      border-top none
    
    .row:last-child
      border-bottom none
    
    .cell
      color #666
      display inline-block
      padding (padding-space / 2) padding-space
      width 180px
    
    .subject_row .cell:first-child
      padding-left (1.5 * padding-space)
    
    .table_header div, .subject_header div, .test_header div, .running_header div
      color #000
      font-bold()
    
    .table_header div:nth-child(1), .subject_row div:nth-child(1)
      width 200px
    
    .table_header div:nth-child(2), .subject_row div:nth-child(2)
      width 100px
    
    .table_header div:nth-child(3), .subject_row div:nth-child(3)
      width 100px
    
    .table_header div:nth-child(4), .subject_row div:nth-child(4)
      width 350px
    
    .message_row .cell:nth-child(1), .message_row .cell:nth-child(2)
      width 300px
      b
        color #000
    
    .req_row .cell
      color #999
    
    .message_row .cell:last-child
      padding-top 0
      width 820px
    
    .subject_options, .test_options, .running_options, .message_options
      border-bottom line-top
      border-top line-bottom
      padding (padding-space / 4) padding-space 0 padding-space
    
    .subject_row:hover, .test_row:hover, .running_row:hover
      background-color #EEE
      cursor pointer
  
  .table_header
    .cell:hover
      background-color color-highlight
      cursor pointer
    
    .sorted_asc
      background url("../img/arrow-up-black.png") no-repeat (padding-space / 2) center
      padding-left 30px!important
    
    .sorted_desc
      background url("../img/arrow-down-black.png") no-repeat (padding-space / 2) center
      padding-left 30px!important

.spinner
  background url("../img/ajax_spinner.gif") no-repeat center
  display inline-block
  height 32px
  width 32px
  vertical-align bottom

.error
  color #F00
  display inline-block
  font-size 20px

